<template>
  <div><!-- 聊天机器人将自动注入到这里 --></div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class DifyChatbot extends Vue {
  mounted() {
    this.injectDifyScript();
  }

  injectDifyScript() {
    // 1. 创建配置脚本
    const configScript = document.createElement('script');
    configScript.innerHTML = `
      window.difyChatbotConfig = {
        token: 'q1UnzGreJBGrQTAM',
        baseUrl: 'http://${process.env.VUE_APP_DIFY_HOST}',
        systemVariables: {}
      }
    `;
    document.head.appendChild(configScript);

    // 2. 创建嵌入脚本
    const embedScript = document.createElement('script');
    embedScript.src = `http://${process.env.VUE_APP_DIFY_HOST}/embed.min.js`;
    embedScript.id = 'q1UnzGreJBGrQTAM';
    embedScript.defer = true;
    document.head.appendChild(embedScript);

    // 3. 添加自定义样式
    const style = document.createElement('style');
    style.innerHTML = `
      
      #dify-chatbot-bubble-window {
        width: 100% !important;
        height: 100% !important;
      }
    `;
    document.head.appendChild(style);
  }
}
</script>

